<template>
  <div class="box" v-show="$store.state.login">

    <div class="login_box">
        <div class="top_box1" v-show="!loginManner">
          <div class="close">
            <i class="el-icon-close" @click="close"></i>
          </div>
           <p>扫码登入</p>
        </div>
      <div v-show="loginManner">
        <div class="top_box">
          <div class="qr"></div>
          <div class="close">
            <i class="el-icon-close" @click="close"></i>
          </div>
        </div>

        <div class="inp_box">
          <div class="username inp">
            <div class="i1">
              <i class=""></i>
            </div>
            <input type="text" name="" id="" v-model="username" />
          </div>

          <div class="password inp">
            <input type="password" name="" id="" v-model="password" />
          </div>
        </div>

        <div class="login_but" @click="login">
          <button>登入</button>
        </div>
      </div>
      <img v-show="!loginManner" class="qrimg" :src="qr" alt="" />
      <button class="but" @click="loginManner1()">切换登入方式</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      username: '',
      password: '',
      qr: '',
      time: null,
      loginManner: false
    }
  },
  mounted () {
    this.$bus.$on('qrlogin', () => {
      this.qrLogin()
    })
  },
  methods: {
    close () {
      this.$store.state.login = !this.$store.state.login
      clearInterval(this.time)
    },
    loginManner1 () {
      clearInterval(this.time)
      console.log('zxc')
      if (this.loginManner) {
        this.qrLogin()
      } else {
        clearInterval(this.time)
      }
      this.loginManner = !this.loginManner
    },
    login () {
      if (this.username == '' || this.password == '') {
        alert('账号密码不能为空')
      } else {
        this.getapi.phoneLogin(this.username, this.password).then((res) => {
          console.log(res, 'login')
          localStorage.setItem('userinfo', JSON.stringify(res))
          this.$store.state.userLoginState = true
        })
      }
    },
    qrLogin () {
      const date = new Date()
      this.getapi.qrLogin().then((res) => {
        console.log(res, 123)
        this.qr = res.qr.qrimg
        this.key = res.key
        this.aaaar()
      })
    },
    aaaar () {
      this.time = setInterval(() => { // 轮询检索二维码扫描状态
        const date = new Date()
        axios({
          method: 'post',
          url: `http://localhost:3000/login/qr/check?${date.getTime()}`,
          data: {
            key: this.key
          }
        })
          .then((res) => {
            console.log(res.data)
          })
          .catch((error) => { console.log(error) })
      }, 1000)
    }

  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9999;
}
.login_box {
  width: 25%;
  height: 470px;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 3px 3px 5px rgb(104, 104, 104);
  border-radius: 10px;
}
.top_box {
  width: 100%;
  height: 175px;
  background-image: url("../../assets/imgs/login/Snipaste_2022-04-25_23-21-37.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.top_box1 {
  width: 100%;
  height: 175px;
}
.top_box1 p{
    font-size: 1.5rem;
    font-weight: 700;
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
}
.top_box .close {
  width: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgb(255, 255, 255);
  float: right;
  border-radius: 10px;
}
.top_box1 .close {
  width: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgb(255, 255, 255);
  float: right;
  border-radius: 10px;
}
.close i {
  font-size: 1.5rem;
  color: #9f9f9f;
}
.close:hover i {
  color: #6f6f6f;
}

.qr {
  width: 100px;
  height: 50px;
  float: left;
}
.inp_box {
  width: 100%;
  height: 90px;
  background-color: white;
}
.inp_box .inp {
  width: 80%;
  height: 50%;
  margin: 0 auto;
  background-color: #9f9f9f;
}
.qrimg{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.but{
  width: 150px;
  height: 30px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  font-size: 0.9rem;
  font-weight: bold;
}

</style>
